<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>健身房开店系统</title>
		<style>
			.container {
				padding: 20px;
			}

			.status {
				float: right;
				margin-right: 20px;
			}

			.steps {
				margin: 20px 0;
			}

			.form-panel {
				margin: 40px auto;
				max-width: 800px;
			}

			.action-btns {
				margin-top: 30px;
				display: flex;
				justify-content: center;
				gap: 10px;
			}

			.welcome-page {
				text-align: center;
			}

			.welcome-page h2 {
				margin-bottom: 20px;
			}

			.el-form-item__content {
				width: 50%;
				margin: 0 auto !important;
			}

			.el-input,
			.el-select,
			.el-date-editor,
			.el-textarea__inner {
				width: 100% !important;
			}

			.success-detail {
				margin: 20px 0;
				color: #606266;
			}

			.info-card {
				margin: 20px auto;
				max-width: 500px;
				background: #f8f9fa;
				border-radius: 8px;
			}

			.card-content {
				padding: 15px;
			}

			.success-item {
				display: flex;
				align-items: center;
				margin: 12px 0;
				font-size: 15px;
			}

			.success-item i {
				color: #67C23A;
				font-size: 18px;
				margin-right: 10px;
				width: 25px;
			}

			.action-btns .el-button {
				padding: 12px 25px;
				border-radius: 20px;
				font-size: 14px;
			}

			.form-section {
				margin-bottom: 30px;
			}

			.form-title {
				font-size: 18px;
				margin-bottom: 20px;
				color: #303133;
				border-left: 4px solid #409EFF;
				padding-left: 10px;
			}

			.avatar-uploader {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				transition: border-color 0.3s;
				width: 178px;
				height: 178px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fbfdff;
			}

			.avatar-uploader:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				text-align: center;
				/*position: relative;*/
				/*top: 89px;*/
				/*right: 89px;*/
				/*margin: 0 auto;*/
			}

			.avatar {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}

			/* 上传提示文字样式 */
			.upload-tip {
				font-size: 12px;
				color: #8c939d;
				margin-top: 8px;
				line-height: 1.5;
			}

			/* 图片预览容器 */
			.image-preview-container {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 10px;
			}

			/* 单个预览图片样式 */
			.preview-image-wrapper {
				position: relative;
				width: 178px;
				height: 178px;
				border-radius: 6px;
				overflow: hidden;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				transition: all 0.3s;
			}

			.preview-image-wrapper:hover {
				transform: translateY(-3px);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
			}


			.preview-image-wrapper:hover .delete-image-btn {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div id="stadium-add-app">
			<div class="container" v-loading="loading">
				<!-- 状态显示 -->
				<div class="status">
					<el-tag :type="statusType">{{statusText}}</el-tag>
				</div>

				<!-- 流程步骤 -->
				<el-steps :active="currentStep" finish-status="success" class="steps">
					<el-step title="进入页面"></el-step>
					<el-step title="店主信息"></el-step>
					<el-step title="场馆信息"></el-step>
					<el-step title="卡信息"></el-step>
					<el-step title="老师信息"></el-step>
					<el-step title="完成"></el-step>
				</el-steps>

				<!-- 内容区域 -->
				<div class="form-panel">
					<!-- 步骤1：进入页面 -->
					<div class="welcome-page" v-if="currentStep === 0">
						<h2>欢迎使用健身房开店系统</h2>
						<el-button type="primary" @click="startProcess">一键开店</el-button>
					</div>

					<!-- 步骤2：店主信息 -->
					<div v-if="currentStep === 1">
						<div class="form-section">
							<div class="form-title">店主信息</div>
							<el-form label-width="120px" :model="formData.user" :rules="userRules" ref="userForm">
								<el-form-item label="用户类型" prop="type">
									<el-select v-model="formData.user.type" placeholder="请选择">
										<el-option label="店主" value="店主"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="密码" prop="password">
									<el-input v-model="formData.user.password" type="password" show-password></el-input>
								</el-form-item>
								<el-form-item label="昵称" prop="nickname">
									<el-input v-model="formData.user.nickname" @blur="usernameblur()"></el-input>
								</el-form-item>
								<el-form-item label="真实姓名" prop="name">
									<el-input v-model="formData.user.name"></el-input>
								</el-form-item>
								<el-form-item label="场主登录用名" prop="username">
									<el-input v-model="formData.user.username"></el-input>
								</el-form-item>
								<el-form-item label="电子邮箱" prop="email">
									<el-input v-model="formData.user.email" type="email"></el-input>
								</el-form-item>
								<el-form-item label="联系方式" prop="phone">
									<el-input v-model="formData.user.phone"></el-input>
								</el-form-item>
								<el-form-item label="身份证号" prop="idNumber">
									<el-input v-model="formData.user.idNumber"></el-input>
								</el-form-item>
								<el-form-item label="年龄">
									<el-input v-model.number="formData.user.age" type="number" min="18" max="100">
									</el-input>
								</el-form-item>
								<el-form-item label="性别">
									<el-radio-group v-model="formData.user.gender">
										<el-radio label="男">男</el-radio>
										<el-radio label="女">女</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="生日">
									<el-date-picker v-model="formData.user.birthday" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
								<el-form-item label="标签">
									<el-select v-model="formData.user.tag" multiple placeholder="请选择标签">
										<el-option v-for="tag in userTagList" :label="tag" :value="tag">
											{{tag}}
										</el-option>
									</el-select>
								</el-form-item>
							</el-form>
						</div>
					</div>

					<!-- 步骤3：场馆信息 -->
					<div v-if="currentStep === 2">
						<div class="form-section">
							<div class="form-title">账户设置</div>
						</div>
						<el-form label-width="120px" :model="formData.shopkeeper" :rules="shopkeeperRules" ref="shopkeeperForm">
							<el-form-item label="等级">
								<el-select v-model="formData.shopkeeper.levels" placeholder="请选择等级">
									<el-option label="初级" :value="1"></el-option>
									<el-option label="中级" :value="2"></el-option>
									<el-option label="高级" :value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="状态">
								<el-select v-model="formData.shopkeeper.status" placeholder="请选择状态">
									<el-option label="活跃" value="0"></el-option>
									<el-option label="停用" value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="场馆场主名称" prop="username">
								<el-input v-model="formData.shopkeeper.username"></el-input>
							</el-form-item>
							<el-form-item label="店铺名称" prop="shopkeeperName">
								<el-input v-model="formData.shopkeeper.shopkeeperName"></el-input>
							</el-form-item>
							<el-form-item label="场馆图片">
								<el-upload class="avatar-uploader" action="/apis/common/upload" :show-file-list="false"
									:on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
									<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div class="upload-tip">
									建议尺寸：支持JPG/PNG格式，大小不超过2MB
								</div>
							</el-form-item>
						</el-form>
						<div class="form-section">
							<div class="form-title">默认地址</div>
						</div>
						<el-form label-width="120px" :model="formData.stadium" ref="stadiumForm">
							<el-form-item label="详细地址" prop="address">
								<el-input v-model="formData.stadium.address"></el-input>
							</el-form-item>
							<el-form-item label="联系方式" prop="phone">
								<el-input v-model="formData.stadium.phone"></el-input>
							</el-form-item>
						</el-form>
					</div>

					<!-- 步骤4： 卡信息 -->
					<div v-if="currentStep === 3">
						<el-table :data="cardTempList" border style="width: 100%" @selection-change="cardTempSelect">
							<el-table-column type="selection" width="55"> </el-table-column>
							<el-table-column prop="cardTempId" label="模板ID" width="180"> </el-table-column>
							<el-table-column prop="name" label="日期" width="180"> </el-table-column>
							<el-table-column prop="type" label="姓名" width="180"> </el-table-column>
							<el-table-column prop="old_price" label="原价"> </el-table-column>
							<el-table-column prop="price" label="现价"> </el-table-column>
						</el-table>
					</div>

					<!-- 步骤5：老师信息 -->
					<div v-if="currentStep === 4">
						店主自动成为老师。
						
					</div>

					<!-- 步骤6：完成页面 -->
					<div class="welcome-page" v-if="currentStep === 5">
						<el-tag type="success" style="font-size: 20px;">{{status}}</el-tag>
						<br>
						<el-button type="success" icon="el-icon-check" @click="submitAllData">
							提交保存店铺
						</el-button>
						<el-button type="primary" icon="el-icon-house" @click="goHome">
							返回首页
						</el-button>
					</div>
				</div>
			</div>

			<!-- 操作按钮 -->
			<div class="action-btns">
				<el-button v-if="currentStep > 1 && currentStep < 6" @click="prevStep">上一步</el-button>
				<el-button v-if="currentStep > 0 && currentStep < 5" type="primary" @click="nextStep">下一步</el-button>
			</div>
		</div>
		</div>

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<script src="../../plugins/element-ui/index.js"></script>
		<link rel="stylesheet" href="../../plugins/element-ui/index.css">

		<script src="../../plugins/axios/axios.min.js"></script>

		<script src="../../js/request.js"></script>
		<script src="../../js/validate.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/index.js"></script>

		<script src="../../api/kaidian.js"></script>
		<script src="../../api/classes.js"></script>
		<script src="../../api/card.js"></script>
		<script>
			function requestUrlParam(paramName) {
				const urlParams = new URLSearchParams(window.location.search);
				return urlParams.get(paramName);
			}

			new Vue({
				el: '#stadium-add-app',
				data() {
					return {
						loading: false,
						cacheKey: 'gym_creation_cache', // 缓存键名
						currentStep: 0,
						status: '未开店',
						imageUrl1: '',
						selectedCard: null,
						cards: [],
						cardList: [], //卡片列表 有cardId
						// 用户标签 tagName
						userTagList: [],
						cardTagList: [],
						// 卡片模板数据
						cardTempList: [],
						selectedCardId: [],
						formData: {
							user: {
								// id: null,
								type: '店主',
								username: '奥德彪',
								password: '12345',
								nickname: '奥德彪',
								name: '阿三',
								email: '1902819291@qq.com',
								phone: '18987482781',
								images: "",
								idNumber: '371829989281988391',
								age: 23,
								gender: '男', // 性别
								birthday: '',
								tag: '',
								status: 1 //状态0禁用 1启用
							},
							shopkeeper: {
								username: '奥德彪', //店主姓名
								shopkeeperName: '香蕉铺子', //店铺名称
								levels: '', //等级
								status: '', //状态
								head: '',
							},
							stadium: {
								is_default: 1,
								name: "",
								address: "济南市长清区",
								phone: "15620910293"
							},
							// card: [],
							// teacher: []
						},
						userRules: {
							type: [{
								required: true,
								message: '请选择用户类型',
								trigger: 'change'
							}],
							password: [{
								required: true,
								message: '请输入密码',
								trigger: 'blur'
							}],
							name: [{
								required: true,
								message: '请输入真实姓名',
								trigger: 'blur'
							}],
							email: [{
								required: true,
								message: '请输入邮箱地址',
								trigger: 'blur'
							}, {
								type: 'email',
								message: '请输入正确的邮箱地址',
								trigger: ['blur', 'change']
							}],
							phone: [{
								required: true,
								message: '请输入联系电话',
								trigger: 'blur'
							}, {
								pattern: /^1[3-9]\d{9}$/,
								message: '请输入正确的手机号码',
								trigger: 'blur'
							}],
							idNumber: [{
								required: true,
								message: '请输入身份证号',
								trigger: 'blur'
							}, {
								pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
								message: '请输入正确的身份证号',
								trigger: 'blur'
							}]
						},
						shopkeeperRules: {
							name: [{
								required: true,
								message: '请输入场馆名称',
								trigger: 'blur'
							}],
							address: [{
								required: true,
								message: '请输入详细地址',
								trigger: 'blur'
							}],
							phone: [{
								required: true,
								message: '请输入联系电话',
								trigger: 'blur'
							}, {
								pattern: /^1[3-9]\d{9}$/,
								message: '请输入正确的手机号码',
								trigger: 'blur'
							}]
						}
					}
				},
				mounted() {
					if (localStorage.getItem(this.cacheKey)) {
						this.$confirm('检测到未完成的店铺创建流程，是否恢复？', '提示', {
							confirmButtonText: '恢复',
							cancelButtonText: '重新开始',
							type: 'warning'
						}).then(() => {
							console.log("当前步骤为 ："+this.currentStep)
							this.loadFromCache();
							this.init();
							
							// this.fetchCards();
						}).catch(() => {
							this.clearCache();
							this.currentStep = 0;
						});
					}
				},
				computed: {
					statusText() {
						return this.status
					},
					statusType() {
						return {
							'未开店': 'info',
							'开店中': 'warning',
							'开店成功': 'success'
						} [this.status]
					}
				},
				created() {
					this.init();
					this.setupBeforeUnload();
					// 监听步骤变化自动保存
					this.$watch('currentStep', (newVal) => {
						if (newVal > 0 && newVal < 6) {
							this.saveToCache();
						}
					});
				},
				methods: {
					init() {
						console.log("123123");
						//this.formData.user.id = Date.now() + Math.random() * 100000
						var _this = this;
						// 查询用户相关标签
						getUserTagsName("用户").then(res => {
							_this.userTagList = res.data || [];
						});
						// 查询会员卡模板 提供选择
						getCardTemp().then(res => {
							_this.cardTempList = res.data
						})
					},
					usernameblur() {
						this.formData.user.username = this.formData.user.nickname
						// 店主姓名 = 用户姓名
						this.formData.shopkeeper.username = this.formData.user.nickname
					},
					// 选中卡片
					cardTempSelect(e) {
						console.log(e);
						this.formData.card = e
					},
					// 图片上传前校验
					beforeAvatarUpload(file) {
						const isJPG = file.type === 'image/jpeg';
						const isLt2M = file.size / 1024 / 1024 < 2;
						if (!isJPG) {
							this.$message.error('上传头像图片只能是 JPG 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传头像图片大小不能超过 2MB!');
						}
						return isJPG && isLt2M;
					},
					handleAvatarSuccess1(res, file) {
						this.formData.shopkeeper.head = res.data
						this.imageUrl1 = URL.createObjectURL(file.raw);
					},

					async startProcess() {
						if (!this.loadFromCache()) {
							
							this.status = '开店中';
							this.currentStep = 1;
						}
					},
					async nextStep() {
						if (this.currentStep < 6) {
							this.currentStep++;
						}
						if (this.currentStep === 6) {
							this.status = '开店成功';
							await this.submitAllData();
						}
					},
					submitAllData() {
						this.loading = true;
						var _this = this;
						this.formData.user.tag = this.formData.user.tag.toString()
						console.log(this.formData.user.tag)
						
						kaidian(this.formData).then(res => {
							if (res.code == 1) {
								_this.loading = false;
								_this.$confirm('开店成功!').then(_ => {
									}).catch(_ => {});
								_this.status = '开店成功';
								this.currentStep == 1;
							}
						})
						
					},
					goHome(){
						// 步骤跳回第一步
						this.currentStep = 0
						// 数据初始化
						this.formData = {
							user: {
								// id: null,
								type: '店主',
								username: '张三',
								password: '123456',
								nickname: '易烊千玺',
								name: '张三',
								email: '123@123.com',
								phone: '15112312312',
								images: "",
								idNumber: '123123123123123123',
								age: 25,
								gender: '男', // 性别
								birthday: '',
								tag: '',
								status: 1 //状态0禁用 1启用
							},
							shopkeeper: {
								username: '张三', //店主姓名
								shopkeeperName: '禅林瑜伽', //店铺名称
								levels: '', //等级
								status: '', //状态
								head: '',
							},
							stadium: {
								is_default: 1,
								name: "高合瑜伽馆",
								address: "山东省济南长清区大学城",
								phone: "15112345678"
							}
						}
						// 清理步骤缓存
						this.clearCache()
					},
					handleUploadSuccess(response, file) {
						this.formData.shopkeeper.images.push(response.url);
					},
					handleRemove(file) {
						const url = file.response?.url || file.url;
						this.formData.shopkeeper.images = this.formData.shopkeeper.images.filter(
							img => img !== url
						);
					},
					prevStep() {
						if (this.currentStep > 0) {
							this.currentStep--;
						}
					},
					// 跳转到店铺详情
					viewDetails() {
						window.parent.menuHandle({
							id: '2',
							url: 'page/stadium/detail.html?id=' + this.formData.user.id,
							name: '店铺详情'
						}, true);
					},
					//卡片选中功能实现
					handleCardChange(value) {
						if (value) {
							const selectedCard = this.cardList.find(card => card.name === value);
							if (selectedCard) {
								this.formData.card = {
									...selectedCard
								};
							}
						}
					},
					saveToCache() {
						const cacheData = {
							currentStep: this.currentStep,
							formData: this.formData,
							selectedCardId: this.selectedCardId,
							imageUrl1: this.formData.shopkeeper.images
						};
						localStorage.setItem(this.cacheKey, JSON.stringify(cacheData));
					},
					loadFromCache() {
						const cached = localStorage.getItem(this.cacheKey);
						if (cached) {
							try {
								const data = JSON.parse(cached);
								console.log(data)
								this.currentStep = data.currentStep;
								// this.formData = data.formData;
								this.formData = {};
								this.selectedCardId = data.selectedCardId || [];
								this.imageUrl1 = data.imageUrl1 ? $minioUrl+data.imageUrl1 : '';

								// 根据步骤恢复表单验证状态
								this.$nextTick(() => {
									if (this.currentStep > 0 && this.$refs.userForm) {
										this.$refs.userForm.clearValidate();
									}
									if (this.currentStep > 1 && shopkeeperForm) {
										shopkeeperForm.shopkeeperForm.clearValidate();
									}
								});
								return true;
							} catch (e) {
								console.error('解析缓存数据失败', e);
								return false;
							}
						}
						return false;
					},
					clearCache() {
						localStorage.removeItem(this.cacheKey);
					},
					setupBeforeUnload() {
						window.addEventListener('beforeunload', (e) => {
							if (this.currentStep > 0 && this.currentStep < 6) {
								this.saveToCache(); // 保存当前状态
								// 可选：显示提示信息
								e.preventDefault();
								e.returnValue = '您有未完成的店铺创建流程，确定要离开吗？';
								return e.returnValue;
							}
						});
					}
				}
			});
		</script>
	</body>
</html>